<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第三次学习</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background-color: #313330;
				perspective: 800px;
			}
			
			.test {
				height: 150px;
			}
			
			.test li {
				float: left;
				list-style: none;
				width: 180px;
				height: 100px;
				overflow: hidden;
				margin: 10px;
			}
			
			.test li img {
				width: 100%;
				height: 100%;
				transition: all 1s;
			}
			
			.test li img:hover {
				transform: scale(1.05);
			}
			
			/* ------------------------- */
			.box {
				width: 100px;
				height: 100px;
				background-color: pink;
				margin-left: 10px;
				animation: boxs 10s  infinite ;
			}
			
			.box:hover {
				animation-play-state: paused;
			}
			
			@keyframes boxs{
				0%{
					transform: translate(0,0);
				}
				25%{
					transform: translate(1000px,0);
				}
				50%{
					transform: translate(1000px,400px);
				}
				75%{
					transform: translate(0,400px);
				}
				100%{
					transform: translate(0,0);
				}
			}
			
			/* ----------------------- */
			.box1 {
				position: relative;
				margin: 0 auto;
				width: 747px;
				height: 617px;
				background: url(img/8ac59a33d93b405980c4cc6907e00831.png) no-repeat;
			}
			
			.area {
				position: absolute;
				top: 228px;
				right: 193px;
			}
			
			.area .dotted {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background-color: #09f;
			}
			
			.area div[class^="yuan"]{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 8px;
				height: 8px;
				border-radius: 50%;
				box-shadow: 0 0 12px #009dfd;
				animation: larger 1.5s linear infinite;
			}
			
			.box1 .area .yuan2 {
				animation: larger 1.5s linear 0.4s infinite;
			}
			
			.box1 .area .yuan2 {
				animation: larger 1.5s linear 0.8s infinite;
			}
			
			@keyframes larger{
				0%{
					
				}
				70%{
					width: 40px;
					height: 40px;
					opacity: 1;
				}
				100%{
					width: 70px;
					height: 70px;
					opacity: 0;
				}
			}
			
			.tb {
				position: absolute;
				top: 499px;
				right: 80px;
			}
			
			.gz {
				position: absolute;
				top: 543px;
				right: 194px;
			}
			
			.bear {
				position: absolute;width: 200px;
				height: 100px;
				background: url(img/bear.png) no-repeat;
				animation: bear 1s steps(8) infinite,run 2s linear forwards;
			}
			
			@keyframes bear{
				from {
					background-position: 0 0;
				}
				
				to {
					background-position: -1600px 0;
				}
			}
			
			@keyframes run{
				from{
					left:0;
				}
				to{
					left:50%;
					transform: translateX(-50%);
				}
			}
			
			form {
				margin-top: 120px;
				margin-bottom: 50px;
			}
			
			
			/* ----------------------------------- */
			.box2 {
				position: relative;
				width: 200px;
				height: 250px;
				margin: 40px auto;
				transform-style: preserve-3d;
				transform: rotateY(45deg);
			}
			
			.box2 div {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			
			.pink {
				background-color: pink;
				z-index: 1;
			}
			
			.purple {
				background-color: purple;
				transform: rotateX(90deg);
			}
			
			
			
			
		</style>
	</head>
	<body>
		<!-- 1.利用scale缩放 -->
			<ul class="test">
				<li>
					<a href="#">
						<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
					</a>
				</li>
				<li>
					<a href="#">
						<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
					</a>
				</li>
				<li>
					<a href="#">
						<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
					</a>
				</li>
			</ul>
			
			<!-- 2.动画效果练习 -->
			<div class="box"></div>
			
			<!-- 3.动画加强版练习 -->
			<div class="box1">
				<div class="area">
					<div class="dotted"></div>
					<div class="yuan1"></div>
					<div class="yuan2"></div>
					<div class="yuan3"></div>
				</div>
				<div class="area tb">
					<div class="dotted"></div>
					<div class="yuan1"></div>
					<div class="yuan2"></div>
					<div class="yuan3"></div>
				</div>
				<div class="area gz">
					<div class="dotted"></div>
					<div class="yuan1"></div>
					<div class="yuan2"></div>
					<div class="yuan3"></div>
				</div>
			</div>
			
			
			<!-- 小熊奔跑 -->
			<div class="bear"></div>
			
			<!-- 表单新增属性测试 -->
			<form action="" method="">
				<input type="date" name="" id="" value="" />
				<input type="url" name="" id="" value="" />
				<input type="number" name="" id="" value="" />
				<input type="search" name="" id="" value="" />
				<input type="color" name="" id="" value="" />
				<input type="submit" name="" id="" value="提交" />
			</form>
			
			<!-- 3D旋转 -->
			<div class="box2">
				<div class="pink"></div>
				<div class="purple"></div>
			</div>
			
			
			
	</body>
</html>
